<template>
	<view>
		<Navbar title="历史记录" :height="Number(height)" :boundingTop="Number(boundingTop)" :color="'#fff'"></Navbar>

		<view class="bg-list"></view>

		<view class="content-box" :style="{ marginTop: 15 + 'px' }">
			<view class="content-box-top">
				<img :src="img" class="content-box-top-img" />
			</view>
			<view class="content-box-text" style="margin-top: 20rpx; font-weight: bold; font-size: 32rpx">{{ nickName }}</view>
			<!-- <view class="content-box-text" style="margin-top: 15rpx">账号ID：26262626446</view> -->
			<view class="page-main">
				<view class="card">
					<view class="card-item" v-for="(item, index) in cardList" :key="index" :style="[{ height: item.randomHeight + 'px' }]">
						<img
							style="width: 100%; height: 100%; border-radius: 16rpx"
							:src="`https://ai2.mojudianzisw.com/img/${item.pictureUrl}`"
							alt="错误。"
							@click="imageClick(item.pictureUrl)"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import setMarginTop from '@/mixins/setMarginTop'; // 引入 mixin
import Navbar from '@/components/navbar.vue';
import { pictures } from '@/api/index';
export default {
	mixins: [setMarginTop], // 使用 mixin
	components: {
		Navbar
	},
	data() {
		return {
			cardList: [],
			nickName: uni.getStorageSync('nickName'),
			img: uni.getStorageSync('avatarUrl')
		};
	},
	onLoad() {
		console.log('=======================');
		this.picturesApi();
	},
	methods: {
		//图片点击放大
		imageClick(imageUrl) {
			const list = [];
			this.cardList.forEach((val) => {
				list.push(`https://ai2.mojudianzisw.com/img/${val.pictureUrl}`);
			});
			uni.previewImage({
				current: `https://ai2.mojudianzisw.com/img/${imageUrl}`, // 当前显示图片的链接
				urls: list // 需要预览的图片数组（这里只预览一张图片）
			});
		},
		getRandomHeight(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		},
		async picturesApi() {
			const data = await pictures({
				openId: uni.getStorageSync('openId')
			});

			console.log(data);
			this.cardList = data.info;
			this.cardList.forEach((item) => {
				item.randomHeight = this.getRandomHeight(100, 250);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-list {
	width: 100%;
	height: 486rpx;
	position: absolute;
	top: 0px;
	left: 0;
	background: url('https://ai.mojudianzisw.com/static/img/shop/ai/listbg.png') no-repeat center center;
	background-size: cover;
}
.content-box {
	position: absolute;
	width: 100%;
	height: auto;
	min-height: 300rpx;
	// border: 1px solid black;
	&-top {
		width: 100%;
		display: flex;
		justify-content: center;
		&-img {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
			background: #fff;
		}
	}
	&-text {
		color: #fff;
		width: 100%;
		text-align: center;
	}
}

.page-main {
	background: #ffffff;
	height: 63.5vh;
	// padding: 0 30px;
	margin-left: 30rpx;
	width: calc(100% - 60rpx);
	margin-top: 115rpx;
	overflow-y: scroll;
	border-radius: 16rpx;
	.card {
		column-count: 2; // 定义三列
		column-gap: 20px; // 列与列的距离为20px
		.card-item {
			text-align: center;
			width: 330rpx;
			border-radius: 16px;
			grid-row-start: auto;
			margin-bottom: 20px;
			break-inside: avoid; // 不被截断
		}
	}
}
</style>
